<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				{{name}}预警详情
			</view>
		</view>
		<view v-if="varList.length==0" class="no_data">
			<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix">
			<view class="font-sub-title">暂无数据</view>
		</view>
		<view v-else class="cu-list menu" :style="{marginTop:navHeight}">
			<view class="cu-list menu-avatar">
				<view class="cu-item flex-direction justify-between padding-sm" style="height: auto;" v-for="(data,index) in varList" >
					<view class="flex justify-between align-center margin-left" style="width: 750rpx;">
						<view class="text-red" v-if="data.dealState==0">
							未处理
						</view>
						<view class="text-green" v-else>
							已处理
						</view>
						<view class="text-gray font-small margin-right-sm">
							{{data.terminalTime}}
						</view>
					</view>

					<view class="margin-left" style="width: 750rpx;padding-right: 25rpx;margin-top: 10rpx;" @tap="openMap(data)">
						<text class="text-red alarm">{{getAlarmType(data.alarmType)}}</text>
						<text class="font-small margin-left desc" v-show="data.alarmType==1">您当前血压{{data.sbp}}/{{data.dbp}}mmHg，{{getSbp(data.sbp)}},{{getDbp(data.dbp)}}</text>
						<text class="font-small margin-left desc" v-show="data.alarmType==2">您当前心率{{data.heartRate}}次/分，{{getHeart(data.heartRate)}}</text>
						<text class="font-small margin-left desc" v-show="data.alarmType==3">您当前体温{{data.temperature}}℃，{{getTemperature(data.temperature)}}</text>
						<text class="font-small margin-left desc" v-show="data.alarmType==4">当前位置为{{data.address}},您已经走出围栏{{Math.round(data.leaveDistance*1000)/1000}}千米</text>
					</view>
					<button v-if="role!='user'&&data.dealState==0" class="bg-blue" style="width: 700rpx;" @click="handleAlarm(data.id,index)">处理</button>
				</view>
			</view>
			<!-- 加载更多 -->
			<biaofun-loading-more :loading="loading" :loadall="loadAll"></biaofun-loading-more>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import biaofunLoadingMore from '@/components/biaofun-loading-more/biaofun-loading-more.vue';
	var bmap = require('@/common/lib/bmap-wx.min.js');
	var that;
	export default {
		components: {
			biaofunLoadingMore
		},
		computed: {
			...mapGetters(['navHeight']),
		},
		data() {
			return {
				statusBarHeight: Vue.prototype.StatusBar,
				varList: [],
				role: uni.getStorageSync("role"),
				pageNum: 1,
				pageSize: 20, // 每页数据条数
				loading: false, // 正在加载中？
				loadAll: false, // 加载了全部数据？
				userId:'',
			}
		},
		async onReachBottom() {
			// 判断是否加载完了全部数据
			if (!this.loadAll) {
				// 查询列表数据
				this.getAlarmList();
			}
		},
		onLoad(e) {
			that = this;
			this.userId = e.id
			this.name = e.name
			this.getAlarmList();
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.loading = false
			this.loadAll = false
			this.varList = []
			this.getAlarmList();
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			getDbp(dbp) {
				if (Number(dbp) >= 90) {
					return "低压超出正常范围"
				} else if (Number(dbp) <= 60) {
					return "低压低于正常范围"
				} else {
					return "低压属于正常范围"
				}
			},
			getSbp(sbp) {
				if (Number(sbp) >= 140) {
					return "高压超出正常范围"
				} else if (Number(sbp) <= 90) {
					return "高压低于正常范围"
				} else {
					return "高压属于正常范围"
				}
			},
			getHeart(heart) {
				if (Number(heart) < 60) {
					return "心率偏低"
				} else if (Number(heart) > 100) {
					return "心率偏高"
				}
			},
			getTemperature(temperature) {
				if (Number(temperature) > 37.2) {
					return "体温偏高"
				} else if (Number(temperature) < 36) {
					return "体温偏低"
				}
			},
			openMap(data) {
				if (data.alarmType == 4) {
					// 新建百度地图对象
					var BMap = new bmap.BMapWX({
						ak: 'qBcf7xTtG21FmcPD8WBIcgnCr6H0EUn9'
					});
					var fail = function(data) {
					};
					var success = function(data) {
						var markers = data.wxMarkerData;
						uni.openLocation({
							latitude: markers[0].latitude,
							longitude: markers[0].longitude,
							success: function() {
							}
						});
					}
					// 发起geocoding检索请求 
					BMap.geocoding({
						address: data.address,
						fail: fail,
						success: success,
						iconPath: '../../static/img/point.png',
						iconTapPath: '../../static/img/point.png'
					});
				}
			},
			getName(imei) {
				var obj = uni.getStorageSync("followInfo");
				return obj[imei];
			},
			getText(type) {
				switch (type) {
					case 1:
						return "pink";
						break;
					case 2:
						return "orange";
						break;
					case 3:
						return "yellow";
						break;
					case 4:
						return "red";
						break;
				}
			},
			getAlarmType(type) {
				switch (type) {
					case 1:
						return "血压预警";
						break;
					case 2:
						return "心率预警";
						break;
					case 3:
						return "体温预警";
						break;
					case 4:
						return "围栏预警";
						break;
				}
			},
			getAlarmList() {
				this.loading = true
				if (this.role == "user") {
					this.$http.getAlarmListByUserId({
						userId:that.userId,
						pageNum: that.pageNum,
						pageSize: that.pageSize,
						sort: "2"
					}).then((res) => {
						that.varList = that.varList.concat(res.content);
						uni.stopPullDownRefresh()
						if (res.content.length < that.pageSize) {
							// 更新 loadAll 状态
							that.loadAll = true;
							// 更新 loading 状态
							that.loading = false;
						}
						// 否：还没有加载完全部数据
						else {
							// 更新 loadAll 状态
							that.loadAll = false;
							// 更新 loading 状态
							that.loading = false;
							// 将下次请求的页数+1
							that.pageNum = that.pageNum + 1;
						}
					})
				} else {
					this.$http.getMedicalStaffAlarmList({
						userId:that.userId,
						pageNum: that.pageNum,
						pageSize: that.pageSize,
						sort: "2"
					}).then((res) => {
						that.varList = that.varList.concat(res.content);
						uni.stopPullDownRefresh()
						if (res.content.length < that.pageSize) {
							// 更新 loadAll 状态
							that.loadAll = true;
							// 更新 loading 状态
							that.loading = false;
						}
						// 否：还没有加载完全部数据
						else {
							// 更新 loadAll 状态
							that.loadAll = false;
							// 更新 loading 状态
							that.loading = false;
							// 将下次请求的页数+1
							that.pageNum = that.pageNum + 1;
						}
					})
				}

			},
			handleAlarm(id,index){
				this.$http.dealAlarm({
					id:id
				}).then(res=>{
					if(res.code==1){
						uni.showToast({
							title:"处理成功",
							position:"bottom",
							icon:"none"
						})
						that.varList[index].dealState = 1
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}

	.cu-item {
		margin-bottom: 15rpx;
	}

	.no_data {
		margin-top: 150rpx;
	}

	.no_data_img {
		margin-top: 150rpx;
	}

	.cu-avatar {
		border-radius: 5px;
	}

	.bg-myBlue {
		background-color: #6496E8
	}

	.alarm {
		width: 120rpx;
	}
</style>
